2<template>
	<view class="content">
		<cu-custom bgColor="bg-gradual-blue">
			<block slot="left" class="tools-box">
				<view @click="onSetting">
					<text class="iconfont icon-shezhi1"></text>
				</view>
				<view style="margin-left: 10px;">
					<text class="iconfont icon-lanya_huaban" :class="{active:isConn}"></text>
				</view>
				<view style="margin-left: 10px;">
					<text class="iconfont icon-dianyuan" :class="{active: curPower}" @click="onPower()"></text>
				</view>

			</block>
			<block slot="content">LED调色</block>
		</cu-custom>
		<view class="content-tab">
			<scale-view>
				<image @tap="onLcarClick" class="car" :src="'/static/l_car' + (l_car ? '_active' :'') +'.png'"></image>
			</scale-view>
			<view class="nav text-center">
				<view class="cu-item content-tab-itme" :class="item.value === tabCur?'text-blue cur':''" v-for="(item,index) in tabs"
				 :key="index" @click="tabSelect(item.value)">
					{{item.label}}
				</view>
			</view>
			<scale-view>
				<image @tap="onRcarClick()" @longpress="rCarLongpress()" class="car" :src="'/static/r_car' +( r_car ? '_active' :'') +'.png'"></image>
			</scale-view>
		</view>
		<color-picker :default-colors="defaultColors" :local-storage="true" local-storage-id="color-picker-key" :picker-width="250"
		 :height="colorPickerHeight" @change="changeColor" @light-change="lightChange"></color-picker>
	</view>
</template>

<script>
	import ColorPicker from "@/components/color-picker/index.vue"
	import ScaleView from "@/components/scale.vue"
	import {
		paletteMode,
		deviceSwitch,
		RGBSwitch,
		setLight
	} from '@/common/msg-helper.js'
	export default {
		components: {
			ColorPicker,
			ScaleView
		},
		data() {
			return {
				colorPickerHeight: 500,
				tabCur: 0, // 默认分区
				light: 50, //光线亮度
				defaultColors: ['#ffffff', '#FF0000', '#FFFF00', '#00FFFF', '#00FF00', '#0000FF', '#FF00FF'],
				tabs: [{
						value: 0,
						label: '全局'
					},
					{
						value: 1,
						label: '分区1'
					},
					{
						value: 2,
						label: '分区2'
					}
				],
				l_car: false,
				r_car: false,
				power: [
					false,
					false,
					false
				]
			}
		},

		mounted() {
			this.colorPickerHeight = this.contentHeight - 45;
		},
		onShareAppMessage() {
			return {
				title: '测试',
				page: '/pages/index/index'
			}
		},
		computed: {
			isConn() {
				return this.$store.state.bluetooth.isConn
			},
			curPower() {
				return this.power[this.tabCur]
			}
		},
		methods: {
			//设置页面
			onSetting() {
				uni.navigateTo({
					url: '/pages/set/set'
				})
			},
			onPower() {
				let power = this.power[this.tabCur]

				if (this.tabCur == 0) {
					this.$set(this.power, 0, !power)
					this.$set(this.power, 1, !power)
					this.$set(this.power, 2, !power)
				} else {
					this.$set(this.power, this.tabCur, !power)
				}
				if (this.power[1] == this.power[2] == !power) {
					this.$set(this.power, 0, !power)
				}

				RGBSwitch(this.tabCur, !power ? 1 : 0)
			},
			tabSelect(val) {
				this.tabCur = val
			},
			lightChange({
				percent,
				value
			}) {

				setLight(this.tabCur, percent)
				console.log('亮度')
			},
			changeColor({
				rgb
			}) {
				paletteMode(this.tabCur, {
					r: rgb[0],
					g: rgb[1],
					b: rgb[2]
				})
			},
			//小车点击
			onLcarClick() {
				this.l_car = !this.l_car
				deviceSwitch(0, this.l_car ? 1 : 0)
			},
			rCarLongpress() {
				uni.navigateTo({
					url: "/pages/device/device"
				})
			},
			onRcarClick() {
				this.r_car = !this.r_car;
				deviceSwitch(1, this.r_car ? 1 : 0)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #074363;
		height: 100vh;

		.content-tab {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.car {
				width: 80upx;
				height: 80upx;
			}

			.car.active {
				color: #007AFF;
			}
		}

		.content-tab-itme {
			color: #fff;
		}

		.content-tab-itme.cur {
			color: #0ad3ec;
		}

		.color_picker {
			background-color: #4CD964;
			width: 500rpx;
			height: 500rpx;
			border-radius: 250rpx;
			margin: 0 auto;
			margin-top: 100rpx;
		}

		.light {
			display: flex;
			align-items: center;

			.light_slider {
				width: 80%;
			}
		}

		.goto_set {
			position: fixed;
			width: 150rpx;
			height: 50rpx;
			bottom: 200rpx;
			right: 80rpx;
			background-color: #FFFFFF;
		}
	}

	.tools-box {
		padding: 0 15px;
		display: flex;

		.icon-lanya_huaban {
			font-size: 45upx;
			margin: 0 5px;

			&.active {
				color: #0055ff;
				animation: glow 1500ms ease-out infinite alternate;
			}
		}

		.icon-dianyuan {
			font-size: 45upx;
			margin: 0 5px;

			&.active {
				color: #ec008c;
				animation: glow 1500ms ease-out infinite alternate;
			}
		}
	}


	@keyframes glow {
		0% {
			color: #22ffd6;
		}

		50% {
			color: #8fffea;
		}

		100% {
			color: #22ffd6;
		}
	}
</style>
